<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>Tables - Ace Admin</title>

		<meta name="description" content="Static &amp; Dynamic Tables" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="${pageContext.request.contextPath }/static/assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath }/static/assets/css/font-awesome.min.css" />
		<%-- <link href="${pageContext.request.contextPath }/static/assets/css/bootstrap-theme.css" rel="stylesheet"/> --%>

		<!-- page specific plugin styles -->

		<!-- text fonts -->
		<link rel="stylesheet" href="${pageContext.request.contextPath }/static/assets/css/ace-fonts.css" />

		<!-- ace styles -->
		<link rel="stylesheet" href="${pageContext.request.contextPath }/static/assets/css/ace.min.css" id="main-ace-style" />

		<!--[if lte IE 9]>
			<link rel="stylesheet" href="${pageContext.request.contextPath }/static/assets/css/ace-part2.min.css" />
		<![endif]-->
		<link rel="stylesheet" href="${pageContext.request.contextPath }/static/assets/css/ace-skins.min.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath }/static/assets/css/ace-rtl.min.css" />

		<!--[if lte IE 9]>
		  <link rel="stylesheet" href="${pageContext.request.contextPath }/static/assets/css/ace-ie.min.css" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->
		<script src="${pageContext.request.contextPath }/static/assets/js/ace-extra.min.js"></script>

		<!-- 表单手动赋值 -->
		<script type="text/javascript" src="${pageContext.request.contextPath }/js/common/manualAssignment.js"></script>
		<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

		<!--[if lte IE 8]>
		<script src="${pageContext.request.contextPath }/static/assets/js/html5shiv.min.js"></script>
		<script src="${pageContext.request.contextPath }/static/assets/js/respond.min.js"></script>
		<![endif]-->
	</head>

	<body class="no-skin">
		<!-- #section:basics/content.breadcrumbs -->
		<div class="breadcrumbs" id="breadcrumbs">
			<script type="text/javascript">
				try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
			</script>
	
			<ul class="breadcrumb">
				<li>
					<i class="ace-icon fa fa-home home-icon"></i>
					<a href="#">Home</a>
				</li>
	
			</ul><!-- /.breadcrumb -->
	
			<!-- #section:basics/content.searchbox -->
			<div class="nav-search" id="nav-search">
				<form class="form-search">
					<span class="input-icon">
						<input type="text" placeholder="Search ${pageContext.request.contextPath }/static." class="nav-search-input" id="nav-search-input" autocomplete="off" />
						<i class="ace-icon fa fa-search nav-search-icon"></i>
					</span>
				</form>
			</div><!-- /.nav-search -->
	
			<!-- /section:basics/content.searchbox -->
		</div>
	
		<!-- /section:basics/content.breadcrumbs -->
		<div class="page-content">
			<!-- #section:settings.box -->
			<div class="ace-settings-container" id="ace-settings-container">
				<div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
					<i class="ace-icon fa fa-cog bigger-150"></i>
				</div>
	
				<div class="ace-settings-box clearfix" id="ace-settings-box">
					<div class="pull-left width-50">
						<!-- #section:settings.skins -->
						<div class="ace-settings-item">
							<div class="pull-left">
								<select id="skin-colorpicker" class="hide">
									<option data-skin="no-skin" value="#438EB9">#438EB9</option>
									<option data-skin="skin-1" value="#222A2D">#222A2D</option>
									<option data-skin="skin-2" value="#C6487E">#C6487E</option>
									<option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
								</select>
							</div>
							<span>&nbsp; Choose Skin</span>
						</div>
	
						<!-- /section:settings.skins -->
	
						<!-- #section:settings.navbar -->
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-navbar" />
							<label class="lbl" for="ace-settings-navbar"> Fixed Navbar</label>
						</div>
	
						<!-- /section:settings.navbar -->
	
						<!-- #section:settings.sidebar -->
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-sidebar" />
							<label class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label>
						</div>
	
						<!-- /section:settings.sidebar -->
	
						<!-- #section:settings.breadcrumbs -->
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-breadcrumbs" />
							<label class="lbl" for="ace-settings-breadcrumbs"> Fixed Breadcrumbs</label>
						</div>
	
						<!-- /section:settings.breadcrumbs -->
	
						<!-- #section:settings.rtl -->
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl" />
							<label class="lbl" for="ace-settings-rtl"> Right To Left (rtl)</label>
						</div>
	
						<!-- /section:settings.rtl -->
	
						<!-- #section:settings.container -->
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-add-container" />
							<label class="lbl" for="ace-settings-add-container">
								Inside
								<b>.container</b>
							</label>
						</div>
	
						<!-- /section:settings.container -->
					</div><!-- /.pull-left -->
	
					<div class="pull-left width-50">
						<!-- #section:basics/sidebar.options -->
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-hover" />
							<label class="lbl" for="ace-settings-hover"> Submenu on Hover</label>
						</div>
	
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-compact" />
							<label class="lbl" for="ace-settings-compact"> Compact Sidebar</label>
						</div>
	
						<div class="ace-settings-item">
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-highlight" />
							<label class="lbl" for="ace-settings-highlight"> Alt. Active Item</label>
						</div>
	
						<!-- /section:basics/sidebar.options -->
					</div><!-- /.pull-left -->
				</div><!-- /.ace-settings-box -->
			</div><!-- /.ace-settings-container -->
	
			<!-- /section:settings.box -->
			<div class="page-content-area">
				<div class="page-header">
					<h1>
						功能
						<small>
							<i class="ace-icon fa fa-angle-double-right"></i>
							考试科目模块 &amp; 科目信息显示
						</small>
					</h1>
				</div><!-- /.page-header -->
	
				<c:if test="${not empty message}">
					<!-- 信息提示框 -->
					<div class="alert alert-success alert-dismissable">
					    <button type="button" class="close" data-dismiss="alert">&times;</button>
					    <strong>信息提示：</strong> ${message }
					 </div>
				</c:if>
	
				<div class="row">
					<div class="col-xs-12">
						<!-- PAGE CONTENT BEGINS -->
						<div class="row">
							<div class="col-xs-12">
								<table id="sample-table-1" class="table table-striped table-bordered table-hover">
									
									<thead>
										<tr>
										</tr>
										
										<tr>
											<th>科目ID</th>
											<th>科目名</th>
											<th>题目数量</th>
											<th>总时间</th>
											<th>总分数</th>
											<th>状态</th>
											<th>科目介绍</th>
											<th><a href="javascript:_toAdd()" class="glyphicon glyphicon-plus" title="Add"></a></th>
										</tr>
									</thead>
									<tbody>
										<c:if test="${empty page.datas}">
											<tr>
												<h1>表数据为空!</h1>
											</tr>
										</c:if>
										<c:forEach items="${page.datas }" var="subject">
										<tr>
											<td>
												<span>${subject.sub_id }</span>
											</td>
											<td>
												<span>${subject.name }</span>
											</td>
											<td>
												<span>${subject.test_count }</span>
											</td>
											<td>
												<span>${subject.total_time }</span>
											</td>
											<td>
											    <span>${subject.total_score }</span>
											</td>
											<td>
												<c:if test="${subject.status eq '0'}">
													<span style="color:green;">未测试</span>
											    </c:if>
											    <c:if test="${subject.status eq '1'}">
													<span style="color:red;">已测试</span>
											    </c:if>
											</td>
											<td>
												<span>${subject.description }</span>
											</td>
											<td>
												<a href="javascript:_toEdit('${subject.sub_id }')" class="glyphicon glyphicon-edit" title="Edit"></a>&nbsp;&nbsp;
												<a href="javascript:_delete('${subject.sub_id }','${subject.name }');" class="glyphicon glyphicon-trash" title="Delete"></a>&nbsp;&nbsp;
												<a href="javascript:_showStudents('${subject.sub_id }','${subject.name }')" title="Students" class="glyphicon glyphicon-user"></a>
											</td>
										</tr>
										</c:forEach>
									</tbody>
								</table>
								
							</div><!-- /.span -->
						</div><!-- /.row -->
	
	
					</div><!-- /.col -->
				</div><!-- /.row -->
			</div><!-- /.page-content-area -->
		</div><!-- /.page-content -->
		<!-- 分页  -->
		<div class="modal-footer no-margin-top">
			<jsp:include page="/jsp/Common/page.jsp">
				<jsp:param value="subjects" name="url"/>
				<jsp:param value="${page.totalSize}" name="items"/>
			</jsp:include>
		</div><!-- 分页结束 -->

		<!-- 删除Modal -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">Message</h4>
		      </div>
		      <div class="modal-body" id="model_body">
		    	<h3 id="deleteMsg">确定删除该科目信息吗</h3>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
		        <button type="button" class="btn btn-primary" onclick="javascript:_delete2();" id="delete_showUser">Delete</button>
		      </div>
		    </div>
		  </div>
		</div>

		<!-- 添加/修改模态框 -->
		<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		    	<form:form id="addSubjectform" action="add" method="post" modelAttribute="subject">
			      <div class="modal-header">
			      	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			        <h4 class="modal-title" id="addOrEditTitle">添加页面</h4>
			      </div>
			      <div class="modal-body">
					<div class="row">
					    <label class="col-md-2 control-label text-right">科目ID</label>
					    <div class="col-md-8">
					      <form:input path="sub_id" class="form-control sub_id" required="true" placeholder="ID" id="subject_id"/>
					      <form:errors path="sub_id" style="color:red;"></form:errors>
					      <span id="SubjectIdMSG"></span>
					    </div>
					 </div>
					 <div class="row">
					    <label class="col-md-2 control-label text-right">科目名</label>
					    <div class="col-md-8">
					      <form:input path="name" required="true" maxlength="15" class="form-control name" placeholder="Name" />	
					      <form:errors path="name" style="color:red;"></form:errors>						      
					    </div>
					 </div>
					 <div class="row">
					    <label class="col-md-2 control-label text-right">科目介绍</label>
					    <div class="col-md-8">
					      <form:input path="description" required="true" id="date" class="form-control description" placeholder="Description" />
					      <form:errors path="description" style="color:red;"></form:errors>
					    </div>
					 </div>
					 
					 <div class="row">
					    <label class="col-md-2 control-label text-right">题目数量</label>
					    <div class="col-md-8">
					     <form:input path="test_count" required="true" maxlength="11" class="form-control test_count" placeholder="Count" />
					     <form:errors path="test_count" style="color:red;"></form:errors>
					    </div>
					 </div>
					 <div class="row">
					    <label class="col-md-2 control-label text-right">总时间</label>
					    <div class="col-md-8">
					      <form:input path="total_time" required="true" digits="true" class="form-control total_time" placeholder="Time" />
					      <form:errors path="total_time" style="color:red;"></form:errors>
					    </div>
					 </div>
					 <div class="row">
					    <label class="col-md-2 control-label text-right">总分数</label>
					    <div class="col-md-8">
					      <form:input path="total_score" required="true" digits="true" class="form-control total_score" placeholder="Score" />
					      <form:errors path="total_score" style="color:red;"></form:errors>
					    </div>
					 </div>
					 <div class="row">
					    <label class="col-md-2 control-label text-right">状态</label>
					    <div class="col-md-8">
					      <form:radiobutton path="status" value="0" class="status status_0"/>未测试
					      <form:radiobutton path="status" value="1" class="status status_1"/>已测试
					      <form:errors path="status" style="color:red;"></form:errors>
					    </div>
					 </div>
			      </div>
			      <div class="modal-footer">
			        <button type="submit" class="btn btn-success" id="addOrEditButton">添加</button>
			        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			      </div>
				</form:form>
		    </div>
		  </div>
		</div>

		<!-- basic scripts -->

		<!--[if !IE]> -->
		<script type="text/javascript">
			window.jQuery || document.write("<script src='${pageContext.request.contextPath }/static/assets/js/jquery.min.js'>"+"<"+"/script>");
		</script>

		<script type="text/javascript">
			var id;//删除学生的ID
			function _delete(sid,sname){
				$("#model_body").html("<h3>确定删除[<font color='red'>"+sname+"</font>]考试科目吗?</h3>");
				id = sid;
				
				$('#myModalLabel').html("Message")
				$('#delete_showUser').html('Delete')
				$('#delete_showUser').attr("onclick","javascript:_delete2();")
				$('#myModal').modal({
					backdrop:'static'
				});
			}
			function _delete2(){
				window.location = "${pageContext.request.contextPath }/subject/delete/"+id;
			}
			
			// 添加科目信息
			function _toAdd(){
				$(".sub_id").val("")
				$(".name").val("")
				$(".description").val("")
				$(".test_count").val("")
				$(".total_time").val("")
				$(".total_score").val("")
				
				$(".sub_id").attr("placeholder","ID")
				$(".name").attr("placeholder","Name")
				$(".description").attr("placeholder","Description")
				$(".test_count").attr("placeholder","Count")
				$(".total_time").attr("placeholder","Time")
				$(".total_score").attr("placeholder","Score")
				$(".status").prop("checked",false)
				
				$("#addSubjectform").attr("action","add")
				$("#subject_id").attr("readonly",false)
				$("#addOrEditTitle").html("添加页面")
				$("#addOrEditButton").html("添加")
				$("#addModal").modal({
					backdrop:'static'
				})
			}
			
			// 修改科目信息
			function _toEdit(subject_id){
				
				$("#addSubjectform").attr("action","edit/"+subject_id)
				$("#subject_id").attr("readonly","readonly")
				$("#addOrEditTitle").html("修改页面")
				$("#addOrEditButton").html("修改")
				
				$.get(
					"${pageContext.request.contextPath }/subject/edit/"+subject_id,
					function(data){
						setValue(data)
					},
					"json"
				)
				
				$("#addModal").modal({
					backdrop:'static'
				})
			}
			
			var subjectId = ""
			//查看选择科目学生
			function _showStudents(subject_id,subject_name){
				subjectId = subject_id
				$.get(
					"${pageContext.request.contextPath }/subject/getSubjectUser/"+subject_id,
					function(data){
						/* console.log(data) */
						html = ""
						var selectUsers = data["selectUsers"]
						var allUsers = data["allUsers"]
						for(var allIndex = 0;allIndex < allUsers.length;allIndex++){
							for(var selectIndex = 0;selectIndex < selectUsers.length;selectIndex++){
								if(allUsers[allIndex].user_id == selectUsers[selectIndex].user_id){
									html += "<div class='checkbox'>"
									html +=		"<label>"
									html += 		"<input name='subjectStudents' type='checkbox' checked = 'checked' value='"+allUsers[allIndex].user_id+"'>"
													+allUsers[allIndex].user_name
									html += 	"</label>"
									html += "</div>"
									break
								}else if(selectIndex == (selectUsers.length-1)){
									html += "<div class='checkbox'>"
									html +=		"<label>"
									html += 		"<input name='subjectStudents' type='checkbox' value='"+allUsers[allIndex].user_id+"'>"
													+allUsers[allIndex].user_name
									html += 	"</label>"
									html += "</div>"
								}
							}
							
							if(selectUsers.length == 0){
								html += "<div class='checkbox'>"
								html +=		"<label>"
								html += 		"<input name='subjectStudents' type='checkbox' value='"+allUsers[allIndex].user_id+"'>"
												+allUsers[allIndex].user_name
								html += 	"</label>"
								html += "</div>"
							}
						}
						
						$('#myModalLabel').html("["+subject_name+"]科目学生")
						$('#delete_showUser').html('Save')
						$('#delete_showUser').attr("onclick","javascript:_saveUserSubject();")
						
						$("#model_body").html(html)
						$('#myModal').modal({
							backdrop:'static'
						});
					},
					"json"
				)
			}
			
			// 保存科目学生
			function _saveUserSubject(){
				var vals = []
				$("input[name='subjectStudents']:checked").each(function(){
					vals.push($(this).val())
				});
				window.location = "${pageContext.request.contextPath }/subject/editSubjectUser?subject_id="+subjectId+"&users_id="+vals.toString();
			}
			
		</script>


		<!-- <![endif]-->

		<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='${pageContext.request.contextPath }/static/assets/js/jquery1x.min.js'>"+"<"+"/script>");
</script>
<![endif]-->
		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='${pageContext.request.contextPath }/static/assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
		<script src="${pageContext.request.contextPath }/static/assets/js/bootstrap.min.js"></script>

		<!-- page specific plugin scripts -->
		<script src="${pageContext.request.contextPath }/static/assets/js/jquery.dataTables.min.js"></script>
		<script src="${pageContext.request.contextPath }/static/assets/js/jquery.dataTables.bootstrap.js"></script>

		<!-- ace scripts -->
		<script src="${pageContext.request.contextPath }/static/assets/js/ace-elements.min.js"></script>
		<script src="${pageContext.request.contextPath }/static/assets/js/ace.min.js"></script>

		<!-- inline scripts related to this page -->
		<script type="text/javascript">
			jQuery(function($) {
				/* var oTable1 = 
				$('#sample-table-2')
				//.wrap("<div class='dataTables_borderWrap' />")   //if you are applying horizontal scrolling (sScrollX)
				.dataTable( {
					bAutoWidth: false,
					"aoColumns": [
					  { "bSortable": false },
					  null, null,null, null, null,
					  { "bSortable": false }
					],
					"aaSorting": [],
			
					//,
					//"sScrollY": "200px",
					//"bPaginate": false,
			
					//"sScrollX": "100%",
					//"sScrollXInner": "120%",
					//"bScrollCollapse": true,
					//Note: if you are applying horizontal scrolling (sScrollX) on a ".table-bordered"
					//you may want to wrap the table inside a "div.dataTables_borderWrap" element
			
					//"iDisplayLength": 50
			    } ); */
				/**
				var tableTools = new $.fn.dataTable.TableTools( oTable1, {
					"sSwfPath": "${pageContext.request.contextPath }/static/${pageContext.request.contextPath }/static/copy_csv_xls_pdf.swf",
			        "buttons": [
			            "copy",
			            "csv",
			            "xls",
						"pdf",
			            "print"
			        ]
			    } );
			    $( tableTools.fnContainer() ).insertBefore('#sample-table-2');
				*/
			
			
				$(document).on('click', 'th input:checkbox' , function(){
					var that = this;
					$(this).closest('table').find('tr > td:first-child input:checkbox')
					.each(function(){
						this.checked = that.checked;
						$(this).closest('tr').toggleClass('selected');
					});
				});
			
			
				$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
				function tooltip_placement(context, source) {
					var $source = $(source);
					var $parent = $source.closest('table')
					var off1 = $parent.offset();
					var w1 = $parent.width();
			
					var off2 = $source.offset();
					//var w2 = $source.width();
			
					if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
					return 'left';
				}
			
			})
		</script>

		<!-- the following scripts are used in demo only for onpage help and you don't need them -->
		<link rel="stylesheet" href="${pageContext.request.contextPath }/static/assets/css/ace.onpage-help.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath }/static/docs/assets/js/themes/sunburst.css" />

		<script type="text/javascript"> ace.vars['base'] = '${pageContext.request.contextPath }/static'; </script>
		<script src="${pageContext.request.contextPath }/static/assets/js/ace/elements.onpage-help.js"></script>
		<script src="${pageContext.request.contextPath }/static/assets/js/ace/ace.onpage-help.js"></script>
		<script src="${pageContext.request.contextPath }/static/docs/assets/js/rainbow.js"></script>
		<script src="${pageContext.request.contextPath }/static/docs/assets/js/language/generic.js"></script>
		<script src="${pageContext.request.contextPath }/static/docs/assets/js/language/html.js"></script>
		<script src="${pageContext.request.contextPath }/static/docs/assets/js/language/css.js"></script>
		<script src="${pageContext.request.contextPath }/static/docs/assets/js/language/javascript.js"></script>
	</body>
</html>
